<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <filmItem
        v-for="film in list"
        :key="film.filmId"
        :filmItem="film"
        :pageType="pageType"
      />
    </van-list>
  </div>
</template>
  
  <script>
import filmItem from "./film-item.vue";
export default {
  props: {
    pageType: {
      type: Number,
      default: 1,
    },
  },
  components: {
    filmItem,
  },
  data() {
    return {
      pageNum: 1,
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    async onLoad() {
      let res = await this.$api({
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
        url: "https://m.maizuo.com/gateway",
        method: "get",
        params: {
          cityId: this.$store.state.cityId,
          pageNum: this.pageNum,
          pageSize: 10,
          type: this.pageType,
          k: 1914688,
        },
      });
      // 调接口取到的新数据
      let newList = res.data.data.films;
      // 新得到的数据放入list
      this.list.push(...newList);
      // 加载结束
      this.loading = false;
      // 获取接口总数据量
      let total = res.data.data.total;
      // 判断 列表内是否已有所有数据，数据全都取到说明不需要再加载了，
      if (this.list.length >= total) {
        // 接口调用结束，再滚动页面不再调用onLoad
        this.finished = true;
      } else {
        this.pageNum += 1;
      }
    },
  },
};
</script>
  
  <style>
</style>